<template>
  <div class="main-page">
    <transition name="fade">
      <router-view class="main-view"/>
    </transition>
    <div class="footer">
        <router-link class="link" to="/"><i class="iconfont icon-shouye"></i>首页</router-link>
        <router-link class="link" to="/release"><i class="iconfont icon-fabu"></i>发布</router-link>
        <router-link class="link" to="/order"><i class="iconfont icon-icon--copy"></i>订单</router-link>
        <router-link class="link" to="/friends"><i class="iconfont icon-pengyou"></i>朋友<span class="tip" v-if="getunreadNum > 0">{{getunreadNum > 99 ? '···' : getunreadNum}}</span></router-link>
        <!-- <a @click="devt" class="link"><i class="iconfont icon-pengyou"></i>朋友</a> -->
        <router-link class="link" to="/my"><i class="iconfont icon-icon03"></i>我的</router-link>
    </div>
  </div>
</template>

<style lang="stylus">
.main-page{
    height 100%
    position relative
    .footer{
        position absolute
        left 0
        bottom 0
        width 100%
        height 50px
        display flex
        align-items center
        background-image: linear-gradient(to bottom, #fcfcfc, #f6f6f6)
        border-top 1px solid #e7e7e7
        .link{
            flex 1
            font-size 14px
            text-align center
            color #8b8b8b
            height 100%
            display flex
            flex-wrap wrap
            align-items center
            justify-content center
            padding 5px 0
            position relative
            .tip{
                background #1359b6
                color #fff
                display inline-block
                width 20px
                height 20px
                line-height 20px
                position absolute
                top 0
                right 0
                border-radius 50%
                font-size 12px
                &:before{
                    content ""
                    display block
                    width 0
                    height 0
                    border-style solid 
                    border-width 6px
                    border-color transparent #1359b6 transparent transparent
                    position absolute
                    top 4px
                    left -10px
                }
            }
            i{
                display block
                width 100%
                font-size 20px
                margin-bottom 5px
            }
            &.router-link-exact-active{
                color #1359b6
                font-weight 700
            }
        }
    }
}
</style>

<script>
import {mapGetters} from 'vuex'
export default {
    data(){
        return {
            toast:null
        }
    },
    computed:{
        ...mapGetters([
            'getunreadNum',
            'getRong'
        ])
    },
    created(){
        if(!this.getRong.token){
            this.toast =this.$createToast({
                time: 0,
                txt: '加载中...'
            }).show()
        }
    },
    watch:{
        getRong(){
            this.toast.hide()
        }
    },
    methods:{
      devt(){
            this.$createDialog({
                type: 'alert',
                title:'该功能正在开发中...',
                confirmBtn: {
                    text: '我知道了',
                    active: true
                }
            }).show()
        },
    }
}
</script>
